<template>
  <!-- ${comments}表单弹窗 -->
  <div>
    <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="650px"
      draggable
      align-center
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form
        v-if="!props.isReadonly"
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="160"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="过程监控分类" prop="abilityType">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.abilityType"
                placeholder="请输入过程监控分类"
                clearable
              />

              <span v-else>{{ formData.abilityType }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="报警通知内容设定" prop="noticeContent">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.noticeContent"
                placeholder="请输入报警通知内容设定"
                clearable
              />

              <span v-else>{{ formData.noticeContent }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人邮件" prop="email">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.email"
                placeholder="请输入接收人邮件"
                clearable
              />

              <span v-else>{{ formData.email }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测程序" prop="programId">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.programId"
                placeholder="请输入检测程序"
                clearable
              />

              <span v-else>{{ formData.programId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检具用途" prop="toolUseType">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.toolUseType"
                placeholder="请输入检测类型"
                clearable
              />

              <span v-else>{{ formData.toolUseType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上限类型" prop="upperLimitType">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.upperLimitType"
                placeholder="请输入上限类型"
                clearable
              />

              <span v-else>{{ formData.upperLimitType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下限类型" prop="lowerLimitType">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.lowerLimitType"
                placeholder="请输入下限类型"
                clearable
              />

              <span v-else>{{ formData.lowerLimitType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公差下限" prop="lowerLimitValue">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.lowerLimitValue"
                placeholder="请输入公差下限"
                clearable
              />

              <span v-else>{{ formData.lowerLimitValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公差上限" prop="upperLimitValue">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.upperLimitValue"
                placeholder="请输入公差上限"
                clearable
              />

              <span v-else>{{ formData.upperLimitValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制线上限收严比例" prop="controlRatioUp">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.controlRatioUp"
                placeholder="请输入控制线上限收严比例"
                clearable
                :suffixIcon="() => '%'"
              />

              <span v-else
                >{{ formData.controlRatioUp
                }}{{ formData.controlRatioUp ? "%" : "" }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制线下限收严比例" prop="controlRatioDown">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.controlRatioDown"
                placeholder="请输入控制线下限收严比例"
                clearable
                :suffixIcon="() => '%'"
              />

              <span v-else
                >{{ formData.controlRatioDown
                }}{{ formData.controlRatioDown ? "%" : "" }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制限上限" prop="controlUp">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.controlUp"
                placeholder="请输入控制限上限"
                clearable
              />

              <span v-else>{{ formData.controlUp }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="控制限下限" prop="controlDown">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.controlDown"
                placeholder="请输入控制限下限"
                clearable
              />

              <span v-else>{{ formData.controlDown }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数标准" prop="parameterStandards">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.parameterStandards"
                placeholder="请输入参数标准"
                clearable
              />

              <span v-else>{{ formData.parameterStandards }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特性项编码" prop="paramCode">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.paramCode"
                placeholder="请输入特性项编码"
                clearable
              />

              <span v-else>{{ formData.paramCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特性项名称" prop="paramName">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.paramName"
                placeholder="请输入特性项名称"
                clearable
              />

              <span v-else>{{ formData.paramName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警数据" prop="noticeData">
              <el-input
                v-if="!props.isReadonly"
                v-model="formData.noticeData"
                placeholder="请输入报警数据"
                clearable
              />

              <span v-else>{{ formData.noticeData }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-descriptions :column="1" border>
        <el-descriptions-item label="过程质量监控分类">{{
          dictionaryStore.filterDictName("AbilityTypeMin", formData.abilityType)
        }}</el-descriptions-item>
        <el-descriptions-item label="报警通知内容设定">{{
          formData.noticeContent
        }}</el-descriptions-item>
        <el-descriptions-item label="接收人邮件">{{
          formData.email
        }}</el-descriptions-item>
        <el-descriptions-item label="检具用途">
          {{ formData.programId }}
        </el-descriptions-item>
        <el-descriptions-item label="检具用途">
          {{
            dictionaryStore.filterDictName(
              "samplingStatus",
              formData.toolUseType
            )
          }}
        </el-descriptions-item>
        <el-descriptions-item label="发送时间">
          {{ formData.createTime }}
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PCMPCMNOTICERECORDADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    // setTimeout(() => {
    //   formRef.value && formRef.value?.clearValidate();
    // }, 50);
  }
);

const rules = reactive({
  abilityType: [],
  createTime: [],
  createdUserId: [],
  createdUserName: [],
  lastUpdatedUserId: [],
  lastUpdatedUserName: [],
  lastUpdateTime: [],
  noticeContent: [],
  email: [],
  programId: [],
  detectionType: [],
  upperLimitType: [],
  lowerLimitType: [],
  lowerLimitValue: [],
  upperLimitValue: [],
  controlRatioUp: [],
  controlRatioDown: [],
  controlUp: [],
  controlDown: [],
  parameterStandards: [],
  paramCode: [],
  paramName: [],
  noticeData: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  abilityType: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  lastUpdateTime: "",
  noticeContent: "",
  email: "",
  programId: "",
  detectionType: "",
  upperLimitType: "",
  toolUseType: "",
  lowerLimitType: "",
  lowerLimitValue: "",
  upperLimitValue: "",
  controlRatioUp: "",
  controlRatioDown: "",
  controlUp: "",
  controlDown: "",
  parameterStandards: "",
  paramCode: "",
  paramName: "",
  noticeData: "",
  id: "",
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        abilityType,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        noticeContent,
        email,
        programId,
        detectionType,
        upperLimitType,
        lowerLimitType,
        lowerLimitValue,
        upperLimitValue,
        controlRatioUp,
        controlRatioDown,
        controlUp,
        controlDown,
        parameterStandards,
        paramCode,
        paramName,
        noticeData,
        id,
      } = newVal;
      Object.assign(formData, {
        abilityType,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdatedUserId,
        lastUpdatedUserName,
        lastUpdateTime,
        noticeContent,
        email,
        programId,
        detectionType,
        upperLimitType,
        lowerLimitType,
        lowerLimitValue,
        upperLimitValue,
        controlRatioUp,
        controlRatioDown,
        controlUp,
        controlDown,
        parameterStandards,
        paramCode,
        paramName,
        noticeData,
        id,
      });
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  // formRef.value && formRef.value?.resetFields();
  // formRef.value && formRef.value?.clearValidate();
  formData.abilityType = "";
  formData.toolUseType = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.lastUpdateTime = "";
  formData.noticeContent = "";
  formData.email = "";
  formData.programId = "";
  formData.detectionType = "";
  formData.upperLimitType = "";
  formData.lowerLimitType = "";
  formData.lowerLimitValue = "";
  formData.upperLimitValue = "";
  formData.controlRatioUp = "";
  formData.controlRatioDown = "";
  formData.controlUp = "";
  formData.controlDown = "";
  formData.parameterStandards = "";
  formData.paramCode = "";
  formData.paramName = "";
  formData.noticeData = "";
  formData.id = "";
}

const loading = ref(false);

/** ${comments}保存提交 */
function handleSubmit() {
  formRef.value &&
    formRef.value?.validate(async (valid: any) => {
      if (valid) {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/dmpDosPcm/pcmnoticerecord/save",
          method: "post",
          data: formData,
        }).finally(() => {
          loading.value = false;
        });
        ElMessage.success(text + `成功`);
        closeDialog();
        emit("reset-table", formData.id);
      }
    });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 135px;
}
</style>
